// 导入useIntersectionObserver
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export default function lazyload (api) {
  const list = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observeOptions) => {
657    /*
    * stop()，停止监听dom
    * target : 监听的dom元素
    * isIntersecting : 监听的dom是否进入到可视区域   boolean值
    * observeOptions : 配置信息
    * 第三个参数为 配置信息 {
    *   root : 相对于谁 , 默认是document
    *   rootMargin : margin偏移
    *   threshold : 百分比 0-1   占比多少才叫进入可视区域，默认不是0
    *    }
    * */
      if(isIntersecting){
        // console.log(observeOptions)
        stop()
        api().then(res=>{
          list.value = res.result
        })
      }
  },{ threshold:0 })
  return { list,target }
}
